<template>
    <div>
        <van-sticky class="hear">
            <div class="search">
                <div class="logoWrap">
                    <img src="../assets/image/xizhilang.jpg">
                </div>
                <!-- focus输入框获得焦点时触发 -->
                <van-search
                    @focus="$router.push('/home/index/search')"
                    placeholder="请输入搜索关键词"
                />
            </div>
        </van-sticky>
        <van-swipe :autoplay="3000" lazy-render>
            <van-swipe-item v-for="image in image" :key="image">
                <img :src="image" />
            </van-swipe-item>
        </van-swipe>

        <!-- <router-link to="/goodslist">商品列表</router-link><br>
        <router-link to="/order">我的订单</router-link> -->

    </div>
</template>

<script>
export default {
  setup() {
    const image  = [
      'https://cdn.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
      'https://cdn.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
    ];
    return { image };
  },
};
</script>  

<style lang="scss" scoped>
@import "../assets/scss/var.scss";
.hear {
    background-color: white;
  .search {
    display: flex;
    align-items: center;
    .logoWrap {
      width: 50px;
      height: 54px;
      padding: 5px 5px;
      img {
        // width: 100%;
        height: 46px;
      }
    }
    .van-search {
      flex: 1;
    }
  }
}
</style>